<template>
	<div id="threeRef"></div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

//创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
//创建网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); //将网格添加到场景中

//设置相机位置
camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0); //相机看向原点
//渲染循环
function animate() {
	// 递归调用渲染函数
	requestAnimationFrame(animate);
	// 旋转立方体
	cube.rotation.x += 0.01;
	// 旋转立方体
	cube.rotation.y += 0.01;
	// 渲染场景和相机
	renderer.render(scene, camera);
}

animate();

// 将渲染器添加到页面
onMounted(() => {
	const container = document.getElementById('threeRef');
	if (container) {
		container.appendChild(renderer.domElement);
	}
});
</script>
<style scoped lang="scss"></style>
